<template>
    <div id="parkings">
        <div id="search">
             <el-select v-model="value" placeholder="审核状态">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
               <el-input
                    v-model="input"
                    placeholder=" 车位号"
                class="carInp"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="toSearch()">搜索</el-button>
        </div>
        <el-table :data="parkings" style="width: 100%">
            <el-table-column
                prop="lessorsId.account"
                label="出租人账号"
                width="180"
            >
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="number" label="车位号" width="180">
            </el-table-column>
            <el-table-column prop="property" label="产权信息">
            </el-table-column>
            <el-table-column prop="cycle" label="出租周期"> </el-table-column>
            <el-table-column prop="price" label="出租价格"> </el-table-column>
            <el-table-column label="审核" width="180">
                <template slot-scope="scope">
                    <el-button
                        type="success"
                        v-if="scope.row.state == '1'"
                        @click="isPass(scope.row._id)"
                        >审核</el-button
                    >
                    <el-button
                        type="success"
                        v-if="scope.row.state == '2'"
                        disabled
                        >审核通过</el-button
                    >
                    <el-button
                        type="danger"
                        v-if="scope.row.state == '1'"
                        @click="isFail(scope.row._id)"
                        >否</el-button
                    >
                    <el-button
                        type="danger"
                        v-if="scope.row.state == '3'"
                        disabled
                        >审核未通过</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <div id="page" style="margin-top: 100px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="dataPage.currentPage - '0'"
                :page-sizes="[1, 3, 5, 7, 11]"
                :page-size="dataPage.pageSize"
                layout="total, sizes, prev, pager, next,jumper"
                :total="dataPage.total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const {
    mapState,
    mapMutations,
    mapGetters,
    mapActions,
} = createNamespacedHelpers("adminParkings");
export default {
    mounted() {
        this.getParkings();
    },
    data() {
        return {
            options: [
                {
                    value: "1",
                    label: "未审核",
                },
                {
                    value: "2",
                    label: "审核通过",
                },
                {
                    value: "3",
                    label: "审核不通过",
                },
            ],
            value: "",
            input: "",
            
        };
    },
    methods: {
        ...mapMutations(["setPageData", "setCurrentPage", "setPageSize"]),
        ...mapActions(["getParkings"]),
        handleSizeChange(val) {
            this.setPageSize(val);
            this.getParkings(this.dataPage);
        },
        handleCurrentChange(val) {
            this.setCurrentPage(val);
            this.getParkings(this.dataPage);
        },
        isPass(id) {
            this.dataPage.isChecked = "2";
            this.dataPage._id = id;
            this.getParkings(this.dataPage);
        },
        isFail(id) {
            this.dataPage.isChecked = "3";
            this.dataPage._id = id;
            this.getParkings(this.dataPage);
        },
        toSearch(){
            this.dataPage.state=this.value;
            this.dataPage.inp=this.input;
            this.getParkings(this.dataPage);
        }
    },
    computed: {
        ...mapState(["parkings", "dataPage"]),
    },
    watch: {
        "dataPage.pageSize": {
            handler(newName, oldName) {
                this.getParkings(this.dataPage);
            },
        },
        "dataPage.currentPage": {
            handler(newName, oldName) {
                this.getParkings(this.dataPage);
            },
        },
    },
};
</script>

<style lang='scss'>
#parkings{
    #search{
      .el-select{
        .el-input{
              width: 150px;
        }
        margin-right: 30px;
      }
      .carInp{
          width: 300px;
          border-radius: 0;
         input{
             border-right: none;
          
         }
         .el-button{
             border-radius: 0;
             border-left: none;
         }
      }
    }
}

</style>